<template>
	<view class="content">
		<!-- <view class="search-box">
			<uni-search-bar :radius="100" @confirm="search" value="搜索关键词"></uni-search-bar>
		</view> -->
		<view class="custom-list">
			<view class="custom-top">
				<image src="../../static/progress4.png" mode="aspectFit"></image>	
			</view>
		</view>
		<view class="custom-list3-box">
			<view class="custom-list3-mian">
				<view class="custom-tile">选择配料</view>
				<view class="custom-list3-text">
					<text>可选可不选，根据个人口味自主决定。</text>
				</view>
				<view class="jeuz">
					<view class="zixuan">
						<view class="zixuan-list" v-for="(item,index) in zixuan" :key="index" :class="{'active': rSelect2.indexOf(index)!=-1}" @click="changeClass(index)">
							<image :src="item.pic" mode=""></image>	
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-nav">
			<view class="cart-btn-box">
				<view class="iconBox-ico" @tap="showBanner">
					<text class="cart-btn-bt">{{num}}</text>
				</view>
				<view class="cart-btn-tetx">
					<text class="cart-cie">￥{{zongqian}}</text>
					<text>已优惠{{youhui}}元</text>
				</view>
			</view>
			<view class="btn-box">
				<button type="default" class="up-btn"  @click="navigateBack(item)">上一步</button>
				<button type="default" class="bot-btn2" @click="tijiaock(item)">下一步</button>
			</view>
		</view>
		<view class="pop-box-bg" v-if="bannerShow">
			<view class="pop-box">
				<view class="toucan-bt">
					<text class="toucan-bt-h4">购物车</text>
					<!-- <text class="toucan-bt-span" @tap="qingkong">清空菜单</text> -->
					<button @tap="closeBanner" class="gb-btn">×</button>
				</view>
				<view class="toucan-box" v-if="quandan">
					<view class="tc-main-box" v-if="deibox">
						<view class="tc-main-bt">
							<text class="tc-main-h4">当前定制菜</text>
							<view class="anbtn-box">
								<button class="bj-btn" @tap="bianjibtn">编辑</button>
								<button class="sanc-btn" @tap="deibtn('当前')">删除</button>
							</view>
						</view>
						<view class="tc-main-list zhucai">
							<view class="tc-main-list-h4">主菜</view>
							<view class="tc-main-list-box" v-for="(cai,z) in dingzData.goods" :key='z'>
								<view class="tc-main-list-box-tx"><image :src="cai.cover"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{cai.title}}，{{cai.attr_name}}</view>
									<view class="caipin-jg">￥{{cai.discount_price}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist" @click="shanchu(z,'goods')">×</button> -->
							</view>
							<view class="tc-main-list fangshi" v-if="dingzData.cooking != ''">
							<view class="tc-main-list-h4">烹饪方式</view>
							<view class="tc-main-list-box">
								<view class="tc-main-list-box-tx"><image :src="dingzData.cooking.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{dingzData.cooking.name}}</view>
									<view class="caipin-jg">￥{{dingzData.cooking.price}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist" @click="shanchu(z,'cooking')">×</button> -->
							</view>
						</view>
						<view class="tc-main-list tiaoliao" v-if="dingzData.seasoning.length != 0">
							<view class="tc-main-list-h4">调料</view>
							<view class="tc-main-list-box" v-for="(tiao,t) in dingzData.seasoning" :key='t'>
								<view class="tc-main-list-box-tx"><image :src="tiao.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{tiao.name}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist" @click="shanchu(t,'seasoning')">×</button> -->
							</view>
						</view>
						<view class="tc-main-list peiliao" v-if="dingzData.collocation.length != 0">
							<view class="tc-main-list-h4">配料</view>
							<view class="tc-main-list-box" v-for="(pei,p) in dingzData.collocation" :key='p'>
								<view class="tc-main-list-box-tx"><image :src="pei.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{pei.name}}</view>
								</view> 
								<button class="qx-btn" v-if="caidanlist" @click="shanchu(p,'collocation')">×</button>
							</view>
						</view>
						</view>
					</view>
					<view class="tc-main-box" v-if="deibox" v-for="(gwc,i) in GWClist" :key='i'>
						<view class="tc-main-bt">
							<text class="tc-main-h4">第{{i+1}}道菜</text>
							<view class="anbtn-box">
								<!-- <button class="bj-btn" @tap="bianjibtn">编辑</button> -->
								<button class="sanc-btn" @tap="deibtn(gwc.id)">删除</button>
							</view>
						</view>
						<view class="tc-main-list zhucai">
							<view class="tc-main-list-h4">主菜</view>
							<view class="tc-main-list-box" v-for="(cai,z) in gwc.detail.goods" :key='z'>
								<view class="tc-main-list-box-tx"><image :src="cai.cover"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{cai.title}}，{{cai.attr_name}}</view>
									<view class="caipin-jg">￥{{cai.discount_price}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist">×</button> -->
							</view>
						</view>
						<view class="tc-main-list fangshi">
							<view class="tc-main-list-h4">烹饪方式</view>
							<view class="tc-main-list-box">
								<view class="tc-main-list-box-tx"><image :src="gwc.detail.cooking.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{gwc.detail.cooking.name}}</view>
									<view class="caipin-jg">￥{{gwc.detail.cooking.price}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist">×</button> -->
							</view>
						</view>
						<view class="tc-main-list tiaoliao">
							<view class="tc-main-list-h4">调料</view>
							<view class="tc-main-list-box" v-for="(tiao,t) in gwc.detail.seasoning" :key='t'>
								<view class="tc-main-list-box-tx"><image :src="tiao.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{tiao.name}}</view>
								</view>
								<!-- <button class="qx-btn" v-if="caidanlist">×</button> -->
							</view>
						</view>
						<view class="tc-main-list peiliao">
							<view class="tc-main-list-h4">配料</view>
							<view class="tc-main-list-box" v-for="(pei,p) in gwc.detail.collocation" :key='p'>
								<view class="tc-main-list-box-tx"><image :src="pei.pic"></image></view>
								<view class="tc-main-list-box-text">
									<view class="caipin-text">{{pei.name}}</view>
								</view> 
								<!-- <button class="qx-btn" v-if="caidanlist" @click="shanchu(p,'collocation')">×</button> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tc-fbg" v-if="bannerShow"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				GWClist:[],
				dingzData:'',
				zongqian:0,
				youhui:0,
				num:'',
				shangzong:0,
				shangyou:0,










				bannerShow:false,
				caidanlist:false,
				deibox:true,
				quandan:true,
				isActive: 0,
				current:0,
				rSelect2:[],
				moren:[],
				zixuan:[],
			}
		},
		onLoad(data) {
			this.shangzong = data.zong
			this.shangyou = data.you
			this.getList()
			this.getGWC()
		},
		onShow(){
			this.getGWC()
			this.dingzData = getApp().globalData.dingzhicai.detail
		},
		// 弹窗监听
		onBackPress() {
			if(this.bannerShow){
				this.bannerShow = false;
				return true;
			}
		},
		methods: {
			getGWC(){ //获取购物车列表                       
				var than = this                          
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/getList",
					data: {},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						console.log(res.data.data);
						if (res.data.code == 1) {
							than.GWClist = res.data.data
							than.num = than.GWClist.length
							if (getApp().globalData.dingzhicai.detail.goods.length != 0) {
								than.num = than.num + 1
							}
							var zongqian = 0
							var yuanjia = 0
							var pengr = 0
							than.GWClist.forEach(e => {
								e.detail.goods.forEach(i => {
									zongqian += Number(i.discount_price);
									yuanjia += Number(i.market_price)
								});
								pengr += Number(e.detail.cooking.price)
							});
							if (getApp().globalData.dingzhicai.detail.goods.length != 0) {
								getApp().globalData.dingzhicai.detail.goods.forEach(k => {
									zongqian += Number(k.discount_price);
									yuanjia += Number(k.market_price)
								});
							}
							than.youhui = (Number(yuanjia) - Number(zongqian)).toFixed(2)
							if (getApp().globalData.dingzhicai.detail.cooking != '') {
								zongqian += Number(getApp().globalData.dingzhicai.detail.cooking.price)
							}
							than.zongqian = (zongqian + pengr).toFixed(2)
							
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},

			shanchu(e){
				var num = -1
				this.zixuan.forEach((i,index)=>{
					if (i.name == getApp().globalData.dingzhicai.detail.collocation[e].name) {
						num = index
					}
				})
				console.log(this.rSelect2 )//是数组，数组也有indexOf
			  if (this.rSelect2.indexOf(num) == -1) {
				console.log(num)//打印下标
				this.rSelect2.push(num);//选中添加到数组里
			  } else {
				this.rSelect2.splice(this.rSelect2.indexOf(num), 1); //取消
				}

				getApp().globalData.dingzhicai.detail.collocation = []
				this.rSelect2.forEach(e => {
					var data = {
					id:this.zixuan[e].id,
					name:this.zixuan[e].name,
					pic:this.zixuan[e].pic,
				}
				getApp().globalData.dingzhicai.detail.collocation.push(data)
				});
			},













			getList(){
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/made/getCollocationList",
					data: {},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							than.zixuan = res.data.data
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
			},
			/* 购物车开关*/
			closeBanner:function(){
				this.bannerShow=false;
			},
			showBanner:function(){
				this.bannerShow=true;
			},
			/* 编辑开关*/
			bianjibtn:function(){
				this.caidanlist=true;
			},
			/* 删除开关*/
			deibtn:function(id){
				if (id == '当前') {
					getApp().globalData.dingzhicai = {
								type:2,
								goods_id:0,
								num:1,
								remark:'',
								detail:{
									goods:[],//主菜
									detail:'',//烹饪方式
									collocation:[],//配菜
									seasoning:[]//调料
								}
							}
							this.dingzData = getApp().globalData.dingzhicai.detail
							than.getGWC()
				}else{
					var than = this;
					uni.request({
						url: getApp().globalData.http + "/shoppingCart/remove",
						data: {
							id:id,
							num:1
						},
						method: "post",
						header: {
							"content-type": "application/x-www-form-urlencoded",
							token: uni.getStorageSync("token")
						},
						success: res => {
							if (res.data.code == 1) {
								than.getGWC()
							} else {
								wx.showToast({
									title: res.data.msg,
									icon: "none",
									duration: 2000
								});
							}
						}
					});
				}
			},
			/* 清空开关*/
			qingkong:function(){
				var than = this;
				uni.request({
					url: getApp().globalData.http + "/shoppingCart/clear",
					data: {},
					method: "post",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						token: uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 1) {
							getApp().globalData.dingzhicai.detail={
																goods:[],//主菜
																cooking:'',//烹饪方式
																collocation:[],//配菜
																seasoning:[]//调料
															}
							this.dingzData = getApp().globalData.dingzhicai.detail
							than.getGWC()
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					}
				});
				// this.quandan=false;
			},
			//上一步
			navigateBack(){
				wx.navigateBack({
				  delta: 1
				})
			},
			//提交
			tijiaock(){
				wx.navigateTo({
					url:'/pages/my/complete'
				})
			},
			changeClass(e) {
			  console.log(this.rSelect2 )//是数组，数组也有indexOf
			  if (this.rSelect2.indexOf(e) == -1) {
				console.log(e)//打印下标
				this.rSelect2.push(e);//选中添加到数组里
			  } else {
				this.rSelect2.splice(this.rSelect2.indexOf(e), 1); //取消
				}
				getApp().globalData.dingzhicai.detail.collocation = []
				this.rSelect2.forEach(e => {
					var data = {
					id:this.zixuan[e].id,
					name:this.zixuan[e].name,
					pic:this.zixuan[e].pic,
				}
				getApp().globalData.dingzhicai.detail.collocation.push(data)
				});
			},
		}
	}
</script>